import { Space } from "antd";
import "./styles.css";
import Link from "next/link";
import { parseISO, format } from "date-fns";

// 文章卡片
export function ArticleCard({
  title,
  date,
  bgp,
  articleLink,
  discription,
}: {
  title: string;
  bgp: string;
  articleLink: string;
  date: string;
  discription: string;
}) {
  return (
    <div className="card" style={{ backgroundImage: `url(${bgp})` }}>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr",
          gridTemplateRows: "1fr 3fr 1fr",
          gap: "10px",
        }}
      >
        <Link href={articleLink} target="_blank" className="link">
          {title.slice(0, 100)}
        </Link>
        <div>
          {discription.length > 100
            ? `${discription.slice(0, 100)}...`
            : discription}
        </div>
        <span style={{ fontSize: "14px" }}>
          {format(date, "yyyy年MM月dd日")}
        </span>
      </div>
    </div>
  );
}
